<template>
    <div class="mainDiv">
        <div class="logo">
            <i><b><span class="logoName">叮&nbsp;当</span></b></i>
            &nbsp;&nbsp;&nbsp;
            <span class="subLogoName">搜一搜</span>
        </div>
        <div class="searchDiv">
            <Input autofocus ref="input" type="text" placeholder="请输入文件名或备注内容" v-model="searchContent" @keyup.enter.native="searchFile()" style="width: 70%;"/>
            &nbsp&nbsp&nbsp
            <Button type="default" @click="searchFile()" ghost="" style="letter-spacing:6px; opacity:1;">
                <b>搜索</b>
            </Button>
        </div>
        <div class="contentDiv">
            <div class="fileDiv" v-for="file in fileData">
                <b><div data-dir="file.file_path" v-html="file.file_name"></div></b>
                <br>
                <div style="margin-left: 20px" v-html="file.remark"></div>
                <br>
                <div style="margin-left: 20px;">
                    {{file.file_path}}
                    &nbsp;&nbsp;&nbsp;
                    <span @click="openFile(file.file_path)" style="font-size: 10px; cursor: pointer; color: #6B8E23;">打开</span>
                    &nbsp;&nbsp;&nbsp;
                    <span @click="openDir(file.file_path)" style="font-size: 10px; cursor: pointer; color: #6B8E23;">打开目录</span>
                    &nbsp;&nbsp;&nbsp;
                    <span @click="managerFile(file.id)" style="font-size: 10px; cursor: pointer; color: #6B8E23;">管理</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
  import {getDB} from '../js/dbUtil'
  // import $ from 'jquery'
  const { shell } = require('electron').remote
  let that
  require('electron').ipcRenderer.on('searchFocus', (event, message) => {
    console.log(message) // Prints 'whoooooooh!'，这里的message是object类型
    that.$refs.input.focus()
  })

  require('electron').ipcRenderer.on('logoRootPath', (event, message) => {
    console.log('logoRootPath', message) // Prints 'whoooooooh!'，这里的message是object类型
  })

  export default {
    name: 'HomePage',
    components: {},
    data () {
      return {
        searchContent: '',
        searchContentDiv: '',
        fileData: [],
        firstLoad: 1,
        columns: [
          {
            title: '编号',
            key: 'id',
            width: '60px'
          },
          {
            title: '文件名',
            key: 'file_name',
            width: '200px'
          },
          {
            title: '路径',
            key: 'file_path'
          }
        ]
      }
    },
    created () {
      console.info('初始化')
      this.firstLoad = 1
    },
    mounted () {
      console.info('页面挂载')
    },
    activated () {
      console.info('激活页面')
      that = this
      if (this.firstLoad === 1) {
        console.info('第一次加载')
        this.firstLoad = 0
      } else {
        console.info('非第一次加载')
        this.$refs.input.focus()
      }
    },
    methods: {
      searchFile: function () {
        console.info('开始搜索')
        let db = getDB()
        let that = this
        let sql = `select id, file_name, file_path, suffix, create_time, remark from t_file order by create_time desc`
        if (this.searchContent) {
          sql = `select id, file_name, file_path, suffix, create_time, remark from t_file where (file_name like '%${this.searchContent}%' or remark like '%${this.searchContent}%') order by create_time desc`
        } else {
          this.$Message.warning('请输入查询内容')
          return
        }
        db.all(sql, function (err, row) {
          // console.info(sql)
          if (err) throw err
          else {
            console.log('查询结果数量', row.length)
            that.fileData = row
            for (let i = 0; i < that.fileData.length; i++) {
              let fileName = that.fileData[i].file_name
              let fileRemark = that.fileData[i].remark
              console.info('fileRemark before', fileRemark)
              let reg = new RegExp(that.searchContent, 'g')
              if (fileName) {
                fileName = fileName.replace(reg, `<span style="color: red">${that.searchContent}</span>`)
              }
              if (fileRemark) {
                fileRemark = fileRemark.replace(reg, `<span style="color: red">${that.searchContent}</span>`)
              }
              console.info('fileRemark after', fileRemark)
              that.fileData[i].remark = fileRemark
              that.fileData[i].file_name = fileName
            }
            console.info('查询数据为', that.fileData)
            if (row.length === 0) {
              that.$Message.warning('哎呀！什么都没查到！')
            }
          }
        })
      },
      openFile: function (filePath) {
        console.info('打开路径', filePath)
        shell.openItem(filePath)
      },
      openDir: function (filePath) {
        console.info('打开路径', filePath)
        shell.showItemInFolder(filePath)
      },
      managerFile: function (id) {
        let param = {
          id: id
        }
        this.$router.push({path: '/file-manager', query: param})
      }
    },
    watch: {
      searchContent: function (val) {
        console.info('watch searchContent', val)
        this.searchContentDiv = '<span style="color: red">' + val + '</span>'
      }
    }
  }
</script>

<style scoped>
    .mainDiv {
        width: 100%;
    }
    .logo {
        text-align: center;
    }
    .logoName {
        font-size: 50px;
        color: #7F7F7F;
        text-shadow: 0.1em 0.1em 0.05em #333
    }
    .subLogoName {
        color: #FFF;
    }
    .searchDiv {
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        text-align: center;
        /*border: 1px solid gold;*/
    }

    .contentDiv {
        margin-top: 30px;
        padding-top: 10px;
        width: 90%;
        height: 370px;
        overflow: auto;
        background-color: #FFF;
        margin-left: auto;
        margin-right: auto;
    }
    .fileDiv {
        margin: 20px 30px;
        border-bottom: 1px dashed #ccc;
    }
</style>
